<template>
    <div id="rule-planning">
        <el-tabs v-model="activeTab">
            <!-- v-if="checkPermission('T_1098_01')" -->
            <el-tab-pane label="来源管理" name="source"> </el-tab-pane>
            <el-tab-pane label="条款管理" name="clause"> </el-tab-pane>
        </el-tabs>
        <div class="main move-box" style="height: calc(100% - 50px); margin-top: 10px">
            <div class="L" id="silder-left" style="min-width: 280px">
                <CardTree ref="tree" :activeTab="activeTab" @handleTreeNodeData="handleTreeNodeData" :pageType="'source-maintenance'" />
                <div class="move-btn" v-move-crosswise></div>
            </div>
            <div class="R silder-right">
                <!-- 来源管理 -->
                <SourceManage v-if="activeTab === 'source'" :treeNodeData="treeNodeData" />
                <!-- 条款管理 -->
                <ClauseManage v-if="activeTab === 'clause'" :treeNodeData="treeNodeData" />
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { checkPermission } from '@/utils/tools';
import CardTree from './compliance-card-production/card-tree.vue';
import ClauseManage from './source-maintenance/clause-manage.vue';
import SourceManage from './source-maintenance/source-manage.vue';
/**
 * 合规来源维护
 * 树形结构复用合规卡
 * */
@Component({ name: 'sourceMaintenance', components: { CardTree, SourceManage, ClauseManage } })
export default class sourceMaintenance extends Vue {
    checkPermission = checkPermission;

    activeTab: string = 'source';
    activeItem: string = 'source'; // 当前树类型
    treeNodeData: any = {
        id: '2',
        label: '全部外规',
        level: 1,
        articleType: '0', // 0外规 1内规 2 合同 3非标
    }; // 当前选中节点

    mounted() {
        // if (!checkPermission('B_1098_01') && checkPermission('B_1098_02')) {
        //     this.activeTab = 'clause';
        // }
    }

    /**
     * 切换 树节点 回调
     */
    handleTreeNodeData(data: any): void {
        console.log(data, 'handleTreeNodeDatahandleTreeNodeData');
        this.treeNodeData = data;
    }

    /**
     * tab切换 事件
     */
    handleTabClick({ name }): void {
        console.log(name, 'tab切换');
        // 切换时候是通过调用接口还是v-if操作
    }
}
</script>
<style lang="scss" scoped>
#rule-planning {
    height: 100%;
    min-width: 1250px;
}

/deep/ .el-tabs {
    // height: 100%;
    .el-tabs__content {
        // padding: 20px;
        // height: calc(100% - 35px);
        overflow: auto;
        .el-tab-pane {
            // color: #333;
            // height: 100%;
            overflow: auto;
        }
    }
}

/deep/ .el-tabs .el-tabs__nav .is-active:hover,
/deep/ .el-tabs__item.is-active {
    // color: #ba926f;
    font-weight: 700;
}

/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    // border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}

/deep/ .el-tabs__nav-wrap::after {
    height: 2px;
    background-color: var(--border-color);
}

/deep/ .el-tabs__active-bar {
    background-color: #f39500 !important;
}

/deep/ .el-tabs .el-tabs__nav .is-active {
    border: none;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    background-color: transparent;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    height: 39px;
    line-height: 39px;
}

/deep/ .el-input--mini .el-input__inner {
    font-size: 12px;
}
</style>
